<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>



</head>

<body>

  <!-- <p ontouchstart="start()" ontouchend="end()">please touch me!</p>
  <p id="content"></p> -->

  <div id="app">
    <p @touchstart="start" @touchend="end">please touch me!</p>
    <p id="content">{{ count }}</p>
    <p>{{ timmer }}</p>

  </div>

  <script>
    // let timmer = setInterval(function(){
    //   console.log("hhhh")
    // }, 20)

    // clearInterval(timmer)
    // timmer = null

    // let timmer = null
    // let count = 0

    // function start() {
    //   timmer = setInterval(function () {
    //     count++
    //     console.log(count)
    //   }, 1000)
    // }

    // function end() {
    //   clearInterval(timmer)
    //   timmer = null

    //   document.getElementById("content").innerText = count
    // }

    // setTimeout(() => {
    //   console.log("20")
    // }, 20);
    // setTimeout(() => {
    //   console.log("10")
    // }, 10);

    let vm = new Vue({
      el: "#app",
      data: {
        count: 0,
        timmer: "hahah",
        nowThis: null
      },
      methods: {
        start() {
          let ctx = this
          ctx.timmer = setInterval(function () {
            ctx.count++
              console.log(ctx.count)
          }, 1000)

          // setTimeout(() => {
          //   console.log("this aaa:", this)
          // }, 20);

          // setTimeout(function() {
          //   console.log("this bbb:", this)
          // }, 20);
        },
        end() {
          let ctx = this
          clearInterval(ctx.timmer)
          ctx.timmer = null
        }
      }
    })
  </script>
</body>

</html>